<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>考试选题</title>
    <base href="${pageContext.request.scheme }://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/ "/>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <script src="js/jquery-3.3.1.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <style>
        .questions{
            width:500px;
            margin: 10px auto;
        }
        .question{
            width: 100%;
            background: #eeeeee;
            margin-top: 2px;
        }
        #time{
            color: #ff0000;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
        }
    </style>

    <script>
        //结束考试
        function finishExam(){
            clearInterval(interval);
            //计算得分
            let sum = 0;
            $(".question").each(function () {
                let right = $(this).find("[name=answer]").val();
                let answer = $(this).find("[name=result]").val();
                if(right == answer){
                    sum += 20;
                }
            });
            let record = {"quetionSetId":${quetionSet.id},"point":sum};
            $.post("examRecord.do?m=add",{"record":JSON.stringify(record)},
                function (data) {
                    if(data == "ok"){
                        console.log("提交完成");
                    }
                });
            alert("考试结束！得分：" + sum);
            location.href = "quetionSet.do?m=findAll"
        }
        //考试时间
        let time = ${quetionSet.time};
        let interval;
        $(function () {
            $(":button").click(function () {
                finishExam();
            })
            //启动倒计时
            interval = setInterval(()=>{
                if(time > 0){
                    $("#time").html("考试时间:" + time--);
                }else{
                    finishExam();
                }
            },1000);
        })
    </script>
</head>
<body>
    <div class="questions">
        <div id="time">考试时间:600</div>
        <c:forEach var="quetion" items="${quetions}">
            <div class="question">
                <input type="hidden" name="answer" value="${quetion.answer}">
                <p>
                    ${quetion.id} . ${quetion.content}
                    <c:if test="${quetion.image != null}">
                        <img src="images/${quetion.image}">
                    </c:if>
                    <select name="result">
                        <option>请选择答案</option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                    </select>
                </p>
                <p>
                    A. ${quetion.optionA}
                </p>
                <p>
                    B. ${quetion.optionB}
                </p>
                <p>
                    C. ${quetion.optionC}
                </p>
                <p>
                    D. ${quetion.optionD}
                </p>
                <hr>
            </div>
        </c:forEach>
        <p>
            <input type="button" value="提交答案">
        </p>
    </div>
</body>
</html>
